// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);



$('#btnChooseImage').click(function () {
    //!  模拟默认点击文件选择框
    $('#file').click();
});
//  更换图片到页面
$('#file').on('change', function () {
    //判断是否为空
    if (!this.files.length) return
    //!将上传的图片变成网络地址放入页面中
    const imgSrc = URL.createObjectURL(this.files[0])
    $image.cropper('destroy').prop('src', imgSrc).cropper(options);

})


// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    // console.log(dataURL);
    axios.post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`)
        .then(({ data: { status, message } }) => {
            // console.log(status)
            if (status !== 0) return layer.msg(message);
            layer.msg(message);
            //!修改完信息，调用父页面封装的函数重新渲染
            window.parent.getUserInfo()
        })
    // .catch(err => {
    //     console.error(err);
    // })
})